<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #n1:active,
        #n2:active,
        #n3:active,
        #n4:active {
            background-color: yellow;
            outline: none;
            border-color: blue;
            

        }

        #under{
            background-color: white;
            border: none;
            outline: none;
        }
    </style>
    <script>



        function active1() {
            var n2 = document.getElementById("n1");
            var b = document.getElementById("under");
            b.value=n2.value;


        }
        function active2() {
            var n2 = document.getElementById("n2");
            var b = document.getElementById("under");
            b.value=n2.value;

        }
        function active3() {
            var n2 = document.getElementById("n3");
            var b = document.getElementById("under");
            b.value=n2.value;

        }
        function active4() {
            var n2 = document.getElementById("n4");
            var b = document.getElementById("under");
            b.value=n2.value;

        }

    </script>
</head>

<body>

    <input type="button" value="新闻" onclick="active1()" id="n1">
    <input type="button" value="体育" onclick="active2()" id="n2">
    <input type="button" value="音乐" onclick="active3()" id="n3">
    <input type="button" value="实时" onclick="active4()" id="n4">
    <br>

    <input type="button" id="under" >
</body>

</html>